<template>
	<!-- 商家信息 -->
	<view class="QR_wp">
		<view class="QR_photo">
			<view class="QR_title">
				<text>*</text>上传微信二维码或群二维码，可显示给下级查看
			</view>
			<view class="QR_message">1.支持.png .jpg .gif格式图片</view>
			<view class="QR_message">2.建议图片尺寸为1:1正方形图片</view>
			<view class="QR_upload_item1 QR_upload_item3">
				<image @click="uploadTap()" class="QR_upload_image QR_upload_image3" :src="qrurl||'/static/business/logo.png'" mode=""></image>
				<!-- <image @click="uploadTap()" class="QR_upload_image QR_upload_image3" src="/static/business/logo.png" mode=""></image> -->
			</view>
		</view>
		<view class="QR_sumbit" @click="onsumbit">提交</view>
	</view>
</template>

<script>
	let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
	export default {
		data() {
			return {
				uid: '',
				qrurl: ''
			}
		},
		onLoad(options) {
			this.uid = options.uid
			// this.getqrInfo();
		},
		methods: {

			getqrInfo() {
				this.$axios('chatqr/mains', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.qrurl = res.data.data.qrurl;
					}
				})
			},
			onsumbit() {
				if (this.qrurl == '' ) {
					this.$api.msg('请完善信息！');
					return;
				}
				this.$axios('chatqr/save', "POST", 'member', {qrurl:this.qrurl}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！')
					}
				})

			},
			uploadTap() {
				var that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						uni.uploadFile({
							url: that.$url.state.url.upload,
							filePath: res.tempFilePaths[0],
							name: 'a',
							header: {
								token
							},
							formData: {
								'file': 'a'
							},
							success(upres) {
								var data = JSON.parse(upres.data);
								if (data.code == 200) {
									that.qrurl = data.data.url;
								} else {
									that.$api.msg(data.data)
								}
							},
							fail() {
								setTimeout(() => {
									that.$api.msg('上传失败，请重试')
								}, 100)
							},
							complete() {
								uni.hideLoading();
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.QR_wp {
		color: $font-color-dark;
		padding: 0 20upx;
	}

	.QR_item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		align-items: center;
		padding: 20upx 0;
	}

	.QR_item_t {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		padding: 20upx 0;
	}

	.QR_title {
		text {
		color: #FF0000;
		font-size: 36upx;
		}
		font-size: 30upx;
		font-weight: bold;
	}
	.QR_input,
	.QR_textarea,
	.QR_add {
		color: $font-color-dark;
		flex: 1;
		text-align: right;
		font-size: $font-sm;
	}

	.QR_title .r_checkstatus {
		font-size: 32upx;
	}

	.QR_textarea {
		width: 100%;
		text-align: left;
		margin: 10upx 15upx 0;
		min-height: 35upx;
		line-height: 35upx;
	}

	.QR_thumb {
		display: flex;
		align-items: flex-start;
	}

	.t_body {
		height: calc((100vw - 100upx) /6);
		margin: 20upx 10upx 0;
		position: relative;
		width: calc(100% / 3);
	}

	.t_body image {
		height: 100%;
		width: 100%;
	}

	.t_body text {
		background: #FF0000;
		border-radius: 50%;
		color: #fff;
		height: 50upx;
		line-height: 40upx;
		font-size: 40upx;
		position: absolute;
		top: -10upx;
		right: -10upx;
		text-align: center;
		width: 50upx;
	}

	.QR_thumb_upload {
		border: 1px #d3d3d3 solid;
		border-radius: 15upx;
	}

	.QR_message {
		color: $font-color-light;
		font-size: $font-sm;
		line-height: 50upx;
	}

	.QR_upload {
		margin-top: 30upx;
		display: flex;
		align-items: center;
	}

	.QR_upload_item1,
	.QR_upload_item2 {
		box-sizing: border-box;
		padding-right: 10upx;
		width: 50%;
	}

	.QR_upload_item0,
	.QR_upload_item3 {
		padding-top: 20upx;
	}

	.QR_upload_item2 {
		padding-left: 10upx;
	}

	.QR_upload_image {
		border-radius: 10upx;
		width: 327upx;
		height: 203upx;
	}

	.QR_upload_image3 {
		height: 150upx;
		width: 150upx;
	}

	.QR_upload_message {
		text-align: center;
	}

	.QR_sumbit {
		background-color: $base-color;
		border-radius: 40upx;
		color: #fff;
		font-size: 30upx;
		line-height: 70upx;
		margin: 60upx auto;
		text-align: center;
		letter-spacing: 3px;
		width: 90%;
	}

	.uni-list-cell-db {
		flex: 1;
		text-align: right;
	}

	.uni-input1 {
		color: grey;
	}
</style>